Tempo Labs supports git-backed projects, allowing you to push and pull changes seamlessly between your local Canvas and a GitHub repository.

​
Connecting a Project to GitHub

Syncing your Tempo Labs project with GitHub is quick and straightforward:

  1. In Tempo Labs, navigate to the Git Settings tab.
  2. Select Create a Repository and name your repo.
  3. When prompted, install the GitHub App to enable integration.
  4. Authorize and Refresh
  5. Return to the main screen and refresh your permissions to complete the setup.

Note: Currently, Tempo Labs supports connecting to personal GitHub accounts only.

​
Creating and Managing Branches

  1. Go to Git Settings and select or add a branch.
  2. Choose the branch you want to edit and begin modifying the project using the AI chat or the built-in code editor. This will automatically create a new branch in GitHub.
  3. Once your edits are complete, return to Git Settings and commit your changes.
  4. To pull changes, visit your GitHub repository, review the changes, and confirm the pull request to integrate updates.

​
Starter Repository Overview

Tempo Labs provides a fully configured Starter Repository to kickstart your project development. Here’s a breakdown of its features:

​
Key Libraries & Setup:

  • Framework: React + TypeScript + Vite.
  • Styling: Tailwind CSS with custom configurations.
  • Components: ShadCN UI pre-installed with a full suite of components.
  • Navigation: React Router for seamless navigation.

​
Component Library:

  • All core components are pre-built and available in src/components/ui/.
  • Pre-defined stories for components in src/stories/.
  • Includes buttons, forms, dialogs, navigation elements, and data displays.
  • Styled with Tailwind, adhering to ShadCN’s design system.

​
Configuration:

  • Custom Tailwind theme and animations.
  • TypeScript configuration with path aliases (@/ points to src/).
  • Optimized Vite configuration with SWC for faster builds.
  • Tempo-specific configurations in tempo.config.json.
  • Pre-configured typography and component styles.

​
Project Structure:

  • src/components - UI components.
  • src/stories - Component variants and stories.
  • src/lib - Utility functions.
  • src/tempobook - Storyboards and dynamic content.

​
Making Changes and Syncing with GitHub

Once GitHub integration is complete, you can sync your project seamlessly:

  1. View the source code in GitHub by navigating to Git Settings → View on GitHub.
  2. Make edits directly in GitHub (e.g., via Codespaces or your preferred IDE).
  3. Push commits, and changes will be automatically reflected in Tempo Labs